<template>
    <div class="container">
        <div class="legend">
            <div class="item" v-for="(item, index) in props.legend" :key="index">
                <div class="square" :style="{ background: [...props.color1, ...props.color2][index] }"></div>
                <div class="name">{{ item }}</div>
            </div>
        </div>
        <div class="flex">
            <div class="chart">
                <V3Echarts @get-echarts="getCharts" :width="props.width" :height="props.height" :options="option" />
            </div>
            <img class="mid" src="../img/中间虚线.png" alt="" />
            <div class="chart1">
                <V3Echarts :width="props.width" :height="props.height" :options="option2" isFirst />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { PIE_TOOLTIP } from '../chartConfig'
import { ref, watch } from 'vue'
import V3Echarts from '@/stories/components/V3Echarts/index.vue'

const props = defineProps({
    chartData: {
        type: Array,
        default: () => {
            return [
                {
                    name: '销售收入',
                    value: 0.15
                },
                {
                    name: '空间资源收入',
                    value: 0.55
                },
                {
                    name: '租赁收入',
                    value: 0.35
                }
            ]
        }
    },
    chartData2: {
        type: Object,
        default: () => {
            return {
                销售收入: [
                    {
                        name: '公共会议室运营收入',
                        value: 0.15
                    },
                    {
                        name: '活动场地运营收入',
                        value: 0.55
                    }
                ],
                空间资源收入: [
                    {
                        name: '公共会议室运营收入',
                        value: 0.25
                    },
                    {
                        name: '活动场地运营收入',
                        value: 0.65
                    }
                ],
                租赁收入: [
                    {
                        name: '公共会议室运营收入',
                        value: 0.45
                    },
                    {
                        name: '活动场地运营收入',
                        value: 0.15
                    }
                ]
            }
        }
    },
    color1: {
        type: Array,
        default: () => ['#0967cd', '#68ddde', '#a484e3']
    },
    color2: {
        type: Array,
        default: () => ['#288486', '#49b2a9']
    },
    legend: {
        type: Array,
        default: () => ['销售收入', '空间资源收入', '租赁收入', '公共会议室运营收入', '活动场地运营收入']
    },
    height: {
        type: Number,
        default: 300
    },
    width: {
        type: Number,
        default: 300
    }
})
let option: any = ref({})
let option2 = ref({})

let myChart1: any = ref(null)

const getCharts = (val: any) => {
    myChart1.value = val
    setTimeout(() => {
        myChart1.value.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: 0
        })
        option.value.series[2].data[0].itemStyle.color = props.color1[0]
    }, 500)
}

function getData(data: any, colorArr = props.color1, color = '') {
    const data1: any = []

    data.forEach((item: any, index: number) => {
        data1.push({
            value: item.value,
            name: item.name,
            itemStyle: { color: color == '' ? colorArr[index] : 'transparent' }
        })
    })
    return data1
}

const initChart = () => {
    const colorCopy = props.color1

    const chartDataCopy = JSON.parse(JSON.stringify(props.chartData))

    let series: any = []

    series = [
        {
            name: '数据',
            type: 'pie',
            radius: ['60%', '70%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            selectedMode: 'single',
            emphasis: {
                //高亮状态的扇区和标签样式
                label: {
                    //图形上的文本标签
                    show: true
                },
                labelLine: {
                    //标签引导线配置
                    show: false
                },
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                        position: 'inside',
                        color: '#ddd',
                        formatter: function (data: any) {
                            return '{value|' + data.value + '}' + '\n' + '{name|' + data.name + '}'
                        },
                        rich: {
                            value: {
                                fontFamily: 'SJyunhei',
                                fontSize: 12,
                                fontWeight: '400'
                            },
                            name: {
                                fontFamily: 'SJyunhei',
                                fontSize: 8,
                                fontWeight: '400'
                            }
                        }
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            labelLine: {
                show: false
            },
            data: getData(chartDataCopy).map((item: any) => {
                return { value: item.value, name: item.name }
            })
        },
        {
            name: '内圈',
            type: 'pie',
            radius: ['48%', '58%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            label: {
                show: false
            },
            itemStyle: {
                opacity: 0.5,
                label: {
                    show: false
                }
            },
            labelLine: {
                show: false
            },
            data: getData(chartDataCopy).map((item: any) => {
                return { value: item.value, name: item.name }
            })
        },
        {
            name: '外圈',
            type: 'pie',
            radius: ['73%', '76%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            label: {
                show: false,
                position: 'center'
            },
            labelLine: {
                show: false
            },
            data: getData(chartDataCopy, props.color1, 'transparent')
        }
    ]

    option.value = {
        color: colorCopy,
        // 鼠标触发提示
        // tooltip: PIE_TOOLTIP,
        series: series
    }
}
const initChart2 = (name: string) => {
    const colorCopy = props.color2

    const copy = JSON.parse(JSON.stringify(props.chartData2))
    const chartDataCopy = copy[name]

    let series: any = []

    series = [
        {
            type: 'pie',
            radius: ['60%', '70%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            labelLine: {
                show: false
            },
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'inside',
                        color: '#ddd',
                        formatter: function (data: any) {
                            return '{value|' + data.value + '}' + '\n' + '{name|' + data.name.slice(0, 3).concat('...') + '}'
                        },
                        rich: {
                            value: {
                                fontFamily: 'SJyunhei',
                                fontSize: 12,
                                fontWeight: '400'
                            },
                            name: {
                                fontFamily: 'SJyunhei',
                                fontSize: 8,
                                fontWeight: '400'
                            }
                        }
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            data: getData(chartDataCopy, props.color2)
        },
        {
            type: 'pie',
            radius: ['48%', '58%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            emphasis: {
                show: false,
                label: {
                    disabled: true
                }
            },
            label: {
                show: false
            },
            itemStyle: {
                opacity: 0.5,
                label: {
                    show: false
                }
            },
            labelLine: {
                show: false
            },
            data: getData(chartDataCopy, props.color2)
        }
    ]

    option2.value = {
        color: colorCopy,
        calculable: true,
        // 鼠标触发提示
        tooltip: PIE_TOOLTIP,
        series: series
    }
}

watch(
    () => props.chartData,
    newValue => {
        initChart()
        initChart2(props.chartData[0].name)
    },
    { immediate: true, deep: true }
)

watch(
    myChart1,
    newVal => {
        if (newVal) {
            newVal.on('mouseover', (e: any) => {
                if (e.data.name != '') {
                    initChart2(e.data.name)
                    option.value.series[2].data[e.dataIndex].itemStyle.color = props.color1[e.dataIndex]
                    newVal.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0
                    })
                    newVal.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: e.dataIndex
                    })
                }
            })
            newVal.on('mouseout', (e: any) => {
                const chartDataCopy = JSON.parse(JSON.stringify(props.chartData))
                if (e.dataIndex != 0) {
                    option.value.series[2].data = getData(chartDataCopy, props.color1, 'transparent')
                    newVal.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0
                    })
                    newVal.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: e.dataIndex
                    })
                }
            })
        }
    },
    { immediate: true, deep: true }
)
</script>

<style lang="scss" scoped>
.container {
    position: relative;
    .flex {
        position: relative;
        width: 800px;
        height: v-bind('props.height');
        .mid {
            position: absolute;
            width: 230px;
            height: 150px;
            left: 50%;
            top: 50%;
            transform: translate(-70%, -10%);
            z-index: 10;
        }
        .chart {
            position: absolute;
            width: 45%;
            left: 0;
            top: 50%;
            transform: translateY(-30%);
            z-index: 11;
        }
        .chart1 {
            position: absolute;
            width: 45%;
            right: 0;
            top: 50%;
            transform: translateY(-30%);
            z-index: 11;
        }
    }
    .legend {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        position: absolute;
        top: 0;
        right: 0;
        .item {
            display: flex;
            align-items: center;
            margin-right: 5px;
            margin-bottom: 5px;
            .square {
                width: 8px;
                height: 8px;
                margin-right: 5px;
                background: #5dcff1;
            }
            .name {
                color: #fff;
                opacity: 0.7;
                font-size: 14px;
            }
        }
    }
}
</style>
